<template>
  <transition name="slide">
    <music-list :title="title" :bgImg="bgImg" :songs="songs" class="list"></music-list>
  </transition>
</template>

<script>
  import MusicList from 'components/music-list/music-list'

  let songs = []
  for (let i = 0; i <= 30; i++) {
    songs[i] = {
      name: 'ddddd',
      disc: 'sfasfasdfasdfasdf'
    }
  }

  export default {
    data () {
      return {
        title: 'list',
        bgImg: 'http://p.qpic.cn/music_cover/Mbno07sCmbib3CRFCbPMU6T32ppxB8hoibuh4cAjpd8kibbqeXhzdiauicg/600?n=1',
        songs: songs
      }
    },
    components: {
      MusicList
    }
  }
</script>

<style scoped lang="stylus">
  .list
    z-index 40
  .slide-enter-active, .slide-leave-active
    transition: all 0.3s
  .slide-enter, .slide-leave-to
    transform: translate3d(100%, 0, 0)
</style>
